<template>
  <div :class="theme">
    <h1>{{ translate('helloworld') }}</h1>
    <el-button @click="locale='zh'">中文</el-button>
    <el-button @click="locale='en'">英文</el-button>
    <br>
    <el-button @click="theme='dark'">深色主题</el-button>
    <el-button @click="theme='light'">浅色主题</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light',
      locale: 'zh',
      message: {
        zh: {
          helloworld: '你好世界!',
          sayhi: '亲你来啦?'
        },
        en: {
          helloworld: 'Hello World!',
          sayhi: 'come on baby'
        }
      }
    }
  },
  created() {
    console.log(this.$t)
  },
  methods: {
    translate(val) {
      const message = this.message[this.locale]
      return message[val]
    }
  }
}
</script>

<style lang='scss' scoped>
.dark{
  background-color: black;
  color:#fff;
  height: 100vh;
}
.light{
  background-color: #fff;
  color: black;
  height: 100vh;

}
</style>
